<template>
  <div class="header">
    <div class="header-content">
      <p class="title">耶购医疗器械供应商管理系统</p>

      <div class="header-user">
        <el-dropdown trigger="click" @command="userMenuClick">
          <div>
            <span class="header-user-name">欢迎用户 {{ userName }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

  <ChangePwd v-model:visible="changePasswordVisible" @cancelClick="cancelClick" @successClick="successClick" />
</template>
<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import { userStore } from '@/store/user'
import ChangePwd from './components/password.vue'

const router = useRouter()
const _userStore = userStore()

const changePasswordVisible = ref(false)


const userName = computed(() => {
  return localStorage.getItem('_third_login_supplierName')
})

const exit = async () => {
  let { err } = await api.post(`/medinstrument/third/supplier/logout`)
  if (err) {
    ElMessage.error(err)
  } else {
    router.push('/login')
    _userStore.logout()
  }
}

const userMenuClick = (cmd) => {
  if (cmd === 'logout') {
    exit()
  } else if (cmd === 'changePassword') {
    changePasswordVisible.value = true
  }
}

const cancelClick = () => {
  changePasswordVisible.value = false
}

const successClick = () => {
  changePasswordVisible.value = false
}
</script>
<style scoped lang="scss">
.header {
  padding: 20px;
  background-color: var(--background);

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 18px;
      font-weight: 500;
      line-height: 25px;
    }

    .header-user {
      display: flex;
      align-items: center;
      color: var(--color-text);
      cursor: pointer;

      .header-user-name {
        display: inline-block;
        line-height: 20px;
        margin-right: 10px;
      }

      .log_out::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        width: 1px;
        height: 12px;
        background-color: #dcdfe6;
      }

      .log_out {
        display: inline-block;
        position: relative;
        line-height: 20px;
        color: #0486fe;
        padding-left: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
